import React from 'react';
import { Row, Col, Input, Avatar } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import logoImg from './logo.png'
import avatarImg from './avatar.jpg'
import PopupLogin from '../popup-login/popup-login';
import PopupRegister from '../popup-register/popup-register';
import { logout } from '../../redux/user-redux';
import './header.css';

// 头部
@connect(state => state.user, {logout})
@withRouter
class Header extends React.Component {

	goHome = () => {
		this.props.history.push('/');
	}
  // 退出登录
  logoutHandler = () => {
    this.props.logout()
  }
  // 管理中心
  goManage = () => {
    this.props.history.push('/admin');
  }
  // 个人中心
  goUsercenter = () => {
    this.props.history.push('/usercenter');
  }

	render() {
		const Search = Input.Search;
    const isLogged = this.props.logged;
    const isManager = this.props.user_type;
		return (
			<div>
        <Row className='header' type='flex' align='middle'>
          <Col span={5} className='col-item'>
            <div className="logo"></div>
          </Col>
          <Col span={9} className='col-item'>
          	<ul className="nav">
          		<li className="nav-item active">首页</li>
          		<li className="nav-item">文章</li>
          		<li className="nav-item">话题</li>
          		<li className="nav-item">活动</li>
          	</ul>
          </Col>
          <Col span={5}>
          	<div className="search-wrapper">
							<Search
				      placeholder="搜索"
				      onSearch={value => console.log(value)}
				      className="search-input"
						  />
          	</div>
          </Col>
          <Col span={5} className='col-item'>
        {/* 根据登录状态显示登录注册还是头像 */}
          {!isLogged ?
          	<ul className="login-reg">
							<li className='login-reg-item'>
                <PopupLogin />
              </li>
							<span>.</span>
							<li className='login-reg-item'>
                <PopupRegister />
              </li>
          	</ul>
          	:
          	<div className="avatar">
      		    <Avatar className="avatar-img" size="large" src={avatarImg} />
          		<div className="user-logout">
          			<div className="usercenter" onClick={this.goUsercenter}>
	          			个人中心
          			</div>
                {isManager === 1 ?
                  <div className="manager" onClick={this.goManage}>管理中心</div>
                  : null}
          			<div className="logout" onClick={this.logoutHandler}>
          				退出登录
          			</div>
          		</div>
          	</div>
          }
          </Col>
        </Row>
			</div>
		);
	}
}

export default Header;
